﻿@model IEnumerable<RoomM.Models.Rooms.RoomAsset>

@{
    ViewBag.Title = "Index";
    int counter = 0;
}

<h2>Danh sách tài sản phòng</h2>


<div style="float: left" width="40%">
    <br/>
    <table  align="center" id="room_assets_table">
        <col width="130" />
        <col width="130" />
        <col width="130" />
        <col width="130" />

        <tr>
            <th>STT</th>
            <th>
                @Html.DisplayNameFor(model => model.RoomId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Asset)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Amount)
            </th>

        </tr>

        @foreach (var item in Model)
        {
            counter++;
        
            <tr>
                <th>@counter</th>
                <td>
                    @Html.DisplayFor(modelItem => item.Room.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Asset.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Amount)
                </td>
            </tr>
        }

    </table>
    <div class="notify" id="notify" style="text-align:center">@ViewBag.Message</div>
</div>


<div style="float: right; width: 40%">

    <div class="editor-label">
        @Html.Label("Loại phòng")
    </div>
    <div class="editor-field">
        @Html.DropDownList("RoomTypeList", "- tất cả -")
    </div>
    <div class="both"></div>

    <div class="editor-label">
        @Html.Label("Mã phòng")
    </div>
    <div class="editor-field">
        @Html.DropDownList("RoomList")
    </div>
    <div class="both"></div>

    <div class="editor-label">
        @Html.Label("Loại tài sản")
    </div>
    <div class="editor-field">
        @Html.DropDownList("AssetsTypeList", "- tất cả -")
    </div>
    <div class="both"></div>
</div>



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            function buildAssetsTable(dataTbl) {
                var contentTbl =
                    "<div id='head_nav'><tr>"
                    + "<th class='wide'>STT</th>"
                    + "<th>Mã phòng</th>"
                    + "<th>Thiết bị</th>"
                    + "<th>Số lượng</th></tr>";
                var counter = 0;

                dataTbl.forEach(function (entry) {
                    console.log(entry);
                    counter++;
                    var row = "<tr>";
                    row += "<th>" + counter + "</th>";
                    row += "<td>" + entry.RoomName + "</td>";
                    row += "<td>" + entry.AssetName + "</td>";
                    row += "<td>" + entry.Amount + "</td><tr>";
                    contentTbl += row;
                });

                $('#room_assets_table').html(contentTbl);

                if (dataTbl.length == 0) {
                    $('#notify').html("Dữ liệu rỗng");
                    $('.notify').show();
                } else {
                    $('.notify').hide();
                }



            }

            function buildRoomOptions(roomData) {
                var opsForRoom = "";
                roomData.forEach(function (entry) {
                    opsForRoom += '<option value="' + entry.RoomId + '">' + entry.RoomName + '</option>';
                });

                $('#RoomList').html(opsForRoom);
                $('#RoomList').val(roomData[0].RoomId);
            }

            function updateRoomOptionsChange(roomId, assetsTypeId) {
                $.post("/RoomAssets/ChangeOptions", { "roomId": roomId, "assetsTypeId": assetsTypeId },
                    function (data, status) {
                        console.log(data);
                        console.log(status);
                        buildAssetsTable(data);
                    });
            }

            function updateRoomTypeOptionsChange(roomTypeId, assetsTypeId) {
                $.post("/RoomAssets/ChangeRoomTypeOptions", { "roomTypeId": roomTypeId, "assetsTypeId": assetsTypeId },
                   function (data, status) {
                       console.log(data);
                       console.log(status);

                       buildRoomOptions(data);

                       // update room assets table
                       // var roomId = $(this).val();
                       // $.proxy(loadTeachers, $('#CourseSelect'))();
                       // var assetsTypeId = $('#AssetsTypeList').val() == "" ? -1 : $('#AssetsTypeList').val();

                       updateRoomOptionsChange(data[0].RoomId, assetsTypeId);
                   });
            }

            $('#RoomTypeList').change(function () {
                var roomTypeId = $(this).val() == "" ? -1 : $(this).val();
                var assetsTypeId = $('#AssetsTypeList').val() == "" ? -1 : $('#AssetsTypeList').val();
                updateRoomTypeOptionsChange(roomTypeId, assetsTypeId);
            });

            $('#RoomList').change(function () {
                var roomId = $(this).val();
                var assetsTypeId = $('#AssetsTypeList').val() == "" ? -1 : $('#AssetsTypeList').val();
                updateRoomOptionsChange(roomId, assetsTypeId);
            });

            $('#AssetsTypeList').change(function () {
                var roomId = $('#RoomList').val();
                var assetsTypeId = $(this).val() == "" ? -1 : $(this).val();
                updateRoomOptionsChange(roomId, assetsTypeId);
            });


            // init
            var roomIdG = $('#RoomList').val();
            var assetsTypeIdG = $('#AssetsTypeList').val() == "" ? -1 : $('#AssetsTypeList').val();
            updateRoomOptionsChange(roomIdG, assetsTypeIdG);


            // init
            if ($('.notify').html() == "")
                $('.notify').hide();
            else
                $('.notify').show(0.8);

        });

    </script>

}
